<template>
  <div class="knowledge-graph-test">
    <div class="header">
      <h1>知识图谱测试</h1>
      <p>测试知识图谱数据是否正确加载</p>
    </div>
    
    <div class="test-section">
      <h3>数据加载测试</h3>
      <a-button @click="loadGraphData" type="primary">加载图谱数据</a-button>
      <div v-if="loading" class="loading">正在加载...</div>
      <div v-if="error" class="error">错误: {{ error }}</div>
      <div v-if="graphData" class="success">
        <p>数据加载成功！</p>
        <p>节点数量: {{ graphData.nodes ? graphData.nodes.length : 0 }}</p>
        <p>边数量: {{ graphData.links ? graphData.links.length : 0 }}</p>
      </div>
    </div>
    
    <div class="test-section">
      <h3>iframe测试</h3>
      <a-button @click="testIframe" type="primary">测试iframe加载</a-button>
      <div v-if="iframeError" class="error">iframe错误: {{ iframeError }}</div>
      <div v-if="iframeLoaded" class="success">iframe加载成功！</div>
    </div>
    
    <div class="test-section">
      <h3>直接显示图谱</h3>
      <div class="graph-container">
        <iframe 
          ref="testIframe"
          src="/graph_visualization.html"
          class="graph-iframe"
          frameborder="0"
          @load="onIframeLoad"
          @error="onIframeError"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
const error = ref('')
const graphData = ref(null)
const iframeError = ref('')
const iframeLoaded = ref(false)
const testIframe = ref(null)

// 加载图谱数据
const loadGraphData = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const response = await fetch('/graph_json.js')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    const text = await response.text()
    console.log('原始数据:', text.substring(0, 500) + '...')
    
    // 尝试解析数据
    const script = document.createElement('script')
    script.textContent = text
    document.head.appendChild(script)
    
    // 等待一下让脚本执行
    await new Promise(resolve => setTimeout(resolve, 100))
    
    if (window.graphJson) {
      graphData.value = window.graphJson
      console.log('图谱数据:', graphData.value)
    } else {
      throw new Error('无法解析graphJson数据')
    }
    
    document.head.removeChild(script)
  } catch (err) {
    error.value = err.message
    console.error('加载图谱数据失败:', err)
  } finally {
    loading.value = false
  }
}

// 测试iframe
const testIframe = () => {
  iframeError.value = ''
  iframeLoaded.value = false
  
  if (testIframe.value) {
    testIframe.value.src = '/graph_visualization.html'
  }
}

// iframe加载完成
const onIframeLoad = () => {
  iframeLoaded.value = true
  iframeError.value = ''
  console.log('iframe加载完成')
}

// iframe加载错误
const onIframeError = (event) => {
  iframeError.value = 'iframe加载失败'
  console.error('iframe加载错误:', event)
}
</script>

<style scoped>
.knowledge-graph-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  margin: 0 0 8px 0;
  color: #1d2129;
  font-size: 24px;
  font-weight: 600;
}

.header p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.test-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-section h3 {
  margin: 0 0 16px 0;
  color: #1d2129;
  font-size: 16px;
  font-weight: 600;
}

.loading {
  color: #1890ff;
  margin-top: 10px;
}

.error {
  color: #ff4d4f;
  margin-top: 10px;
  padding: 8px;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
}

.success {
  color: #52c41a;
  margin-top: 10px;
  padding: 8px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
}

.graph-container {
  height: 500px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 16px;
}

.graph-iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

